<template>
	<view class="conti">
		<view class="im">
			<image src="../../static/square/pen.png"></image>
		</view>
		<view class="discuss">
			<view class="com">
				<view class="user_name">匿名
					<u-icon name="integral" color="#ec693f"></u-icon>
				</view>
				<label class="sub_time">今天10:14</label>
				<view class="ph" @click="navi(id)">
					{{text}}
				</view>
				<view class="bottom_fu">
					<view class="left">
						<u-icon name="bookmark" size="30rpx" color="#fd5f00"></u-icon>
						<label class="txt">随笔</label>
					</view>
					<view class="right">
						<view class="ii">
							<u-icon name="heart" @click="point_an" size="30rpx" :color="zang.color"></u-icon>
							<label class="txt">{{zang.count}}</label>
						</view>
						<view class="ii">
							<u-icon name="more-circle" size="30rpx"></u-icon>
							<label class="txt">1</label>
						</view>
						<view class="ii">
							<u-icon name="zhuanfa" @click="share" size="30rpx"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'square_function',
		data() {
			return {
				text:'猫咪在落叶里打滚儿，晚霞铺满天空，风把思念吹向你，我贪恋的人间不过是你而已。',
				zang: {
					color: '',
					count: 1
				}
			}
		},
		methods: {
			point_an() {
				this.zang.color = '#E8222D'
				// 判断用户是否点赞且只能点赞一次
				this.zang.count++
			},
			share() {
				uni.share({
					provider: 'weixin',
					scene: 'WXSceneTimeline',
					type: 0,
					href: 'http://uniapp.dcloud.io/',
					title: 'uni-app分享',
					summary: '我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！',
					imageUrl: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/d8590190-4f28-11eb-b680-7980c8a877b8.png',
					success: function(res) {
						console.log('success:' + JSON.stringify(res))
					},
					fail: function(err) {
						console.log('fail:' + JSON.stringify(err))
					}
				})
			},
			navi(){
				uni.navigateTo({ url:'../../pages/comment/comment' })
			}
		}
	}
</script>

<style lang="less">
	.conti {
		.im {
			margin-top: -25rpx;
			margin-left: 43vh;
			position: absolute;
			width: 90rpx;
			height: 90rpx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.discuss {
			margin-top: 50rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			.com {
				width: 85%;
				min-height: 250rpx;
				border: 1px lightgray solid;
				box-shadow: 1px 1px 1px 1px #ec693f;
				border-radius: 10px;
				display: flex;
				align-content: center;
				flex-direction: column;
				justify-content: space-between;
				.sub_time{
					font-size: 22rpx;
					margin-left: 10rpx;
					font-family: "楷体";
					height: 20rpx;
					margin-top: -10rpx;
					margin-bottom: 10rpx;
					color: gray;
				}
				.user_name {
					margin: 12rpx 15rpx;

					u-icon {
						margin-left: 5rpx;
					}
				}

				.ph {
					margin-left: 20rpx;
					width: 95%;
					min-height: 100rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					line-height: 40rpx;
					padding-left: 10rpx;
					padding-right: 5rpx;
					text-align: justify;
				}

				.bottom_fu {
					margin-bottom: 10rpx;

					.txt {
						font-size: 25rpx;
					}

					.left {
						float: left;
						margin-left: 20rpx;
						display: flex;
						justify-content: center;
						align-items: center;
					}

					.right {
						float: right;
						display: flex;
						justify-content: center;
						align-items: center;
						margin-right: 20rpx;

						.ii {
							display: flex;
							justify-content: center;
							align-items: center;
							margin-right: 5rpx;
						}
					}
				}
			}
		}
	}
</style>
